<script setup>
import ContentWrap from "@/components/common/ContentWrap";
import { ref, unref, computed } from "vue";
import {
  ElDivider,
  ElImage,
  ElTag,
  ElTabPane,
  ElTabs,
  ElButton,
  ElMessage,
} from "element-plus";
import EditInfo from "./components//EditInfo.vue";
import EditPassword from "./components/EditPassword.vue";

import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();

const userInfo = computed(() => userStore.getUserInfo);

const activeName = ref("first");
const dialogVisible = ref(false);
const uploadAvatarRef = ref();
const avatarLoading = ref(false);
// 控制API信息显示/隐藏的状态
const showApiInfo = ref({
  app_code: false,
  app_id: false,
  app_secret: false,
});
// 切换显示状态的函数
const toggleApiInfo = (key) => {
  showApiInfo.value[key] = !showApiInfo.value[key];
};
const saveAvatar = async () => {
  try {
    avatarLoading.value = true;
    const base64 = unref(uploadAvatarRef)?.getBase64();
    // 可调用保存头像 API
    fetchDetailUserApi();
    ElMessage.success("修改成功");
    dialogVisible.value = false;
  } catch (error) {
    console.log(error);
  } finally {
    avatarLoading.value = false;
  }
};
</script>
<template>
  <div>
    <div class="flex w-100% h-100%">
      <ContentWrap title="个人信息" class="w-400px">
        <div class="flex justify-between items-center">
          <div>账号：</div>
          <div>{{ userInfo?.account }}</div>
        </div>
        <ElDivider />
        <div class="flex justify-between items-center">
          <div>姓名：</div>
          <div>{{ userInfo?.contact_name }}</div>
        </div>
        <ElDivider />
        <div class="flex justify-between items-center">
          <div>机构：</div>
          <div>{{ userInfo?.company_name }}</div>
        </div>
        <ElDivider />
        <div class="flex justify-between items-center">
          <div>描述：</div>
          <div>{{ userInfo?.remark }}</div>
        </div>
        <ElDivider />
        <div class="flex justify-between items-center">
          <div>绑定邮箱：</div>
          <div>{{ userInfo?.bind_email }}</div>
        </div>
        <ElDivider />
        <!-- <div class="flex justify-between items-center">
          <div>渠道名称：</div>
          <div>{{ userInfo?.agent_name }}</div>
        </div>
        <ElDivider /> -->
      </ContentWrap>
      <ContentWrap title="基本资料" class="flex-[3] ml-20px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="first">
            <EditInfo :user-info="userInfo" />
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="second">
            <EditPassword />
          </el-tab-pane>
        </el-tabs>
      </ContentWrap>
    </div>
    <div>
      <ContentWrap title="API信息" class="w-full">
        <div class="flex justify-between items-center">
          <div>app_code:</div>
          <div class="flex items-center">
            <span class="mr-2">{{
              showApiInfo.app_code ? userInfo?.app_code : "******"
            }}</span>
            <Icon
              :icon="showApiInfo.app_code ? 'mdi:eye-off' : 'mdi:eye'"
              class="cursor-pointer"
              @click="toggleApiInfo('app_code')" />
          </div>
        </div>
        <ElDivider />
        <div class="flex justify-between items-center">
          <div>app_id</div>
          <div class="flex items-center">
            <span class="mr-2">{{
              showApiInfo.app_id ? userInfo?.app_id : "******"
            }}</span>
            <Icon
              :icon="showApiInfo.app_id ? 'mdi:eye-off' : 'mdi:eye'"
              class="cursor-pointer"
              @click="toggleApiInfo('app_id')" />
          </div>
        </div>
        <ElDivider />
        <div class="flex justify-between items-center">
          <div>app_secret</div>
          <div class="flex items-center">
            <span class="mr-2">{{
              showApiInfo.app_secret ? userInfo?.app_secret : "******"
            }}</span>
            <Icon
              :icon="showApiInfo.app_secret ? 'mdi:eye-off' : 'mdi:eye'"
              class="cursor-pointer"
              @click="toggleApiInfo('app_secret')" />
          </div>
        </div>
      </ContentWrap>
    </div>
  </div>
</template>

<style lang="less" scoped>
.avatar {
  position: relative;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 50px;
    color: #fff;
    background-color: rgb(0 0 0 / 40%);
    border-radius: 50%;
    content: "+";
    opacity: 0;
    justify-content: center;
    align-items: center;
  }

  &:hover {
    &::after {
      opacity: 1;
    }
  }
}
</style>
